import React, { Component } from 'react';
import ReactEcharts from 'echarts-for-react';
import { DatePicker } from 'antd';
import HotWord from '../HotWord/HotWord'
import './CategoryTopTen.less'

const { RangePicker } = DatePicker;

class UserAndIntegration extends Component {
  render() {
    const detailsData = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'bar',
      }]
    }

    return (
      <div className="category-top-ten">
        <div className="chart-title">
          <div className="title">Category Top 10</div>
          <div className="chart-title-right">
            <div className="filter">
              <div>Today</div>
              <div>Week</div>
              <div>Month</div>
            </div>
            <div className="date-filter">
              <label>Time: <RangePicker /></label>
            </div>
          </div>
        </div>
        <div className="chart-content">
          <ReactEcharts
            option={detailsData}
            style={{height: '420px', width: '70%'}}
            className='react_for_echarts' />
          <HotWord />
        </div>

      </div>
    )
  }
}

export default UserAndIntegration;
